@charset "utf-8"; 
.hot{
	ul{
		list-style: none !important;
	}
	padding-top: 59px; 
	.hotMainBg{
		padding: 50px 30px 30px;
		.h_m_topBg{
			border-bottom: 2px solid #e4e7ed;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.leftBg{
				.btn{
					display: flex;
					flex-direction: row;
					li{
						padding: 0 30px;
						position: relative;
						h1{
							font-size: 18px;
							color: #303133;
							letter-spacing: .34px;
							font-weight: normal;
							line-height: 62px;
							cursor: pointer;
						}
					}
					
					.acBtn:after{
						content: "";
						position: absolute;
						left: 0;
						bottom: -2px;
						width: 100%;
						height: 2px;
						background: #4a25ba;
						z-index: 1;
					}
					.acBtn{
						h1{
							font-size: 24px;
							color: #4a25ba;
							letter-spacing: .46px;
							font-weight: 600;
						}
					}
				}
			}
			.rightBg{
				color: #383b4a;
				font-size: 14px;
				line-height: 20px;
			}
		}
		
		.h_m_botBg{
			.tgBtnBox{
				
				.h_b_04BoxMain{
					margin-top:10px;
					>dt{
						border-bottom: 1px solid #E4E7ED;
						margin-bottom: 20px;
						display: flex;
						flex-direction: row;
						padding: 0 15px;
						// justify-content: center;
						ul{
							display: flex;
							flex-direction: row;
							border-top: 1px solid #E4E7ED;
							border-left: 1px solid #E4E7ED;
							border-right: 1px solid #E4E7ED;
							border-top-left-radius: 4px;
							border-top-right-radius: 4px;
							li{
								border-right: 1px solid #E4E7ED;
								cursor: pointer;
								position: relative;
								span{
									display: block;
									font-size: 14px;
									padding: 0 20px;
									height: 40px;
									line-height: 40px;
									color: #303133;
								} 
							}
							li:last-child{
								border-right: none;
							}
							
							li:hover{
								span{
									color: #4A25BA;
								}
							}
							
							.hb_ac_00{ 
								span{
									color: #4A25BA;
								}
							}
							.hb_ac_00:after{
								content: "";
								position: absolute;
								left: 0;
								bottom: -1px;
								width: 100%;
								height: 1px;
								background: #fff;
								z-index: 1;
							}
						}
					}
					 
				}
				
			   >ul{
			   	display: flex;
			   	flex-direction: row;
			   	flex-wrap: wrap;  
			   	>li{
			   		//width: calc(33.3% - 50px);
			   		width: 398px;
			   		margin: 15px 0 15px 25px;
			   		height: 350px; 
			   		border: 1px solid #dcdfe6;
			   		border-radius: 4px;
			   		padding: 0 10px;
			   		.t{
			   			padding: 11px 0;
			   			display: flex;
			   			flex-direction: row;
						justify-content: space-between;
			   			align-items: center;
			   			border-bottom: 1px solid #dcdfe6;
						.le{
							display: flex;
							flex-direction: row; 
							align-items: center;
							.tu{
									height: 28px; 
									display: flex;
									flex-direction: column;
									justify-content: center;
									img{
										height: 100%;
										display: block;
									}
									.lg{
										height: 18px;
									}
								}
								span{
									height: 28px;
									font-size: 14px;
									color: #303133;
									letter-spacing: .23px;
									font-weight: 500;
									margin-left: 15px;
									line-height: 28px;
								}
							
						}
						
						.ri{
							color: #383b4a;
							font-size: 12px; 
							    height: 28px;
							    line-height: 28px; 
							    width: 50px;
								text-align: center;
								position: relative;
						}
						
						.ri:after{
							content: "";
							position: absolute;
							left: 0;
							bottom:-12px;
							width: 100%;
							height: 2px;
							background: #606266;
						}
			   		}
			   		.m{
			   			height: 245px;
			   			overflow-y: auto; 
			   			dl{
			   				display: flex;
			   				flex-direction: row;
			   				align-items: center;
							justify-content: space-between;
			   				    padding: 5px 0;
			   				    border-bottom: 1px solid #f2f6fc;
			   				dt{
			   					font-size: 14px;
			   					color: #383b4a;
			   					line-height: 14px;
								display: flex;
								flex-direction: row;
								.num{
									margin-right: 5px;
								}
			   				}
			   				dd{
			   					    font-size: 14px;
			   					    color: #606266;
			   					    padding-left: 5px;
			   						word-break: break-all;
			   						line-height: 1.8;
								display: flex;
								flex-direction: row;
								align-items: center;
								.data{
			   					    font-size: 14px;
			   					    color: #383b4a; 
			   						line-height: 1.8;
								}
								.line{
								    width: 9px;
								    height: 3px;
								    margin-left: 3px;
									background-color:#909399;
								}
			   				}
			   			}
						dl:last-child{
							border: none;
						}
						.setBox{
							height: 100%; 
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.tu{
								width: 120px;
								img{
									width: 100%;
									display: block;
								}
								span{
									display: block;
									text-align: center;
									    font-size: 12px;
									    color: #757576;
									    letter-spacing: .23px;
										line-height: 24px;
								}
							}
							.btn{
								background: #4a25ba;
								    border-radius: 15px;
								    line-height: 14px;
								    text-align: center;
								    width: 132px;
								    height: 30px;
								    line-height: 30px;
								    font-size: 14px;
								    color: #fff;
								    letter-spacing: .27px; 
									margin-top: 24px;
									cursor: pointer;
							}
						}
					}
			   		.b{
			   			display: flex;
			   			flex-direction: row;
			   			justify-content: space-between;
			   			    padding: 2px 5px 0;
			   			    margin-top: 8px;
			   			    border-top: 1px solid #dcdfe6;
			   			span{
			   				display: block;
			   				font-size: 12px;
			   				color: #606266;
			   				letter-spacing: .23px;
			   				height: 40px;
			   				line-height: 40px;
			   			}
			   			.ri{
			   				display: flex;
			   				flex-direction: row;
			   				align-items: center;
			   				cursor: pointer;
			   				img{
			   					display: block;
			   					height: 16px;
			   					margin-right: 5px;
			   				}
			   			}
			   		}
			   	}
			   	>li:hover{
			   		box-shadow: 0 0 12px #efefef;
			   	}
				.addHot{
					background: #f2f6fc;
					border-style: dashed;
					position: relative;
					.addBtn{
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						margin: auto;
						width: 135px;
						height: 30px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						    border-radius: 4px;
						    cursor: pointer;
						align-items: center;
						background: #ede9f8;
						    border: 1px solid #b7a8e3;
						span{
							display: block;
							    font-size: 14px;
								line-height: 30px;
							    color: #4a25ba;
							    letter-spacing: .27px;
							    font-weight: 600;
								margin: 0 3px;
						}
					}
				}
			  }
			}
		}
	}
}


@media screen and (max-width:1800px) and (min-width:768px) {
	.h_m_botBg{
		.tgBtnBox{
		   >ul{  
		   	>li{
		   		width: calc(33.3% - 50px) !important; 
		   	} 
		  }
		}
	}
}

@media screen and (max-width:767px){
	.hot{
		.hotMainBg{
			padding: 15px;
			.h_m_topBg{
				justify-content: center;
				.rightBg{
					display: none;
				}
				.leftBg{
					.btn{
						li{
							padding: 0 20px;
							h1{
								font-size: 15px; 
								line-height: 36px;
							}
						}
						
						.acBtn{
							h1{
								font-size: 16px; 
								line-height: 36px;
							}
						}
					}
				}
			}
		
			.h_m_botBg{
				.tgBtnBox{
					>ul{
						>li{
							margin: 15px 0;
							width: calc(100% - 20px);
						}
					}
					
					>.h_b_04BoxMain{
						>dt {
							ul li span{
								font-size: 12px;
							}
						}
					}
					
					
				}
			}
		
		}
	}
}